<%--
  - Author		:	Jaewon Choi
  - Date			:
  - Description	:	
  --%>
<%@ page language="java" %>
<%@ page contentType="text/html; charset=utf-8" %>
<%@ page pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/pages/includes/taglibs.jspf" %>
<%@ include file="/WEB-INF/pages/includes/variables.jspf" %>
<%@ include file="/WEB-INF/pages/includes/doctype.jspf" %>
<html>
	<head>
<%@ include file="/WEB-INF/pages/includes/metatags.jspf" %>
		<title><fmt:message key="pages.title" /></title>
		<link rel="stylesheet" type="text/css" href="<c:url value="${dirStyles}/common.css" />" />
		<link rel="stylesheet" type="text/css" href="<c:url value="${dirScripts}/jqueryUi/css/ui-lightness/jquery-ui-1.8.21.custom.css" />" />

		<script type="text/javascript" src="<c:url value="${dirScripts}/jquery-1.7.2.min.js" />"></script>
		<script type="text/javascript" src="<c:url value="${dirScripts}/jquery-ui-1.8.21.custom.min.js" />"></script>
		<script type="text/javascript" src="<c:url value="${dirScripts}/common.js" />"></script>
		<script type="text/javascript">
			$(function() {
				$( ".date" ).datepicker({
					showOn: "both",
					buttonImage: "<c:url value="${dirImages}/calendar.png" />",
					buttonImageOnly: true,
					dateFormat: "yy-mm-dd",
					changeMonth: true,
					changeYear: true
				});
			});
			function goAction(){
				var searchType = $(".searchType:checked").val();
				var dateType = $(".dateType:checked").val();
				var startPeriod = document.searchFrm.startPeriod.value;
				var endPeriod = document.searchFrm.endPeriod.value;
				
				var tabData = new Array();
				if(searchType == "year"){
					if(dateType == 1 && (startPeriod == "" ||  endPeriod == "")){
						alert("검색 기간을 설정하여 주세요.");
						return ; 
					}
					
					if(dateType == 0){
						var now = new Date();
						for(var i = now.getFullYear();i>=2012;i--){
							searchDatePeriod = i+"-01-01~"+i+"-12-31";
							tabData.push(i+"년,"+searchDatePeriod);	
						}
					}else{
						var spDate = new Date(parseISO8601(startPeriod));
						var epDate = new Date(parseISO8601(endPeriod));
						
						if(epDate.getFullYear() >= spDate.getFullYear()+8){
							alert("최대 8년까지 조회 가능합니다.");
							return ; 
						}
						
						for(var i = epDate.getFullYear();i>=spDate.getFullYear();i--){
							searchDatePeriod = i+"-01-01~"+i+"-12-31";
							tabData.push(i+"년,"+searchDatePeriod);	
						}
					}
				}else if(searchType == "month"){
					if(startPeriod == "" ||  endPeriod == ""){
						alert("검색 기간을 설정하여 주세요.");
						return ; 
					}
					
					var spDate = new Date(parseISO8601(startPeriod));
					var epDate = new Date(parseISO8601(endPeriod));
					var tmpDate = new Date(parseISO8601(endPeriod));
					
					if(spDate.getFullYear() != epDate.getFullYear()){
						alert("월별 검색 시 조회기간은 같은 연도만 가능합니다.");
						return ;
					}
					
					for(var i = epDate.getMonth();i>=spDate.getMonth();i--){
						tmpDate.setDate(1);
						tmpDate.setMonth(i);
						searchDatePeriod = $.datepicker.formatDate("yy-mm-01", tmpDate)+"~";
						tmpDate.setMonth(i+1);
						tmpDate.setDate(0);
						searchDatePeriod += $.datepicker.formatDate("yy-mm-dd", tmpDate);
						tabData.push((i+1)+"월,"+searchDatePeriod);	
					}
				}else if(searchType == "date"){
					if(startPeriod == "" ||  endPeriod == ""){
						alert("검색 기간을 설정하여 주세요.");
						return ; 
					}
					
					var spDate = new Date(parseISO8601(startPeriod));
					var epDate = new Date(parseISO8601(endPeriod));
					var tmpDate = new Date(parseISO8601(endPeriod));
					
					if(spDate.getFullYear() != epDate.getFullYear() || spDate.getMonth() != epDate.getMonth()){
						alert("일별 검색 시 조회기간은 같은 연도, 같은 월만 가능합니다.");
						return ;
					}
					
					for(var i = epDate.getDate();i>=spDate.getDate();i--){
						tmpDate.setDate(i);
						searchDatePeriod = $.datepicker.formatDate("yy-mm-dd", tmpDate) + "~" + $.datepicker.formatDate("yy-mm-dd", tmpDate);
						tabData.push(i+"일,"+searchDatePeriod);	
					}
				}else{
					if(dateType == 0){
						searchDatePeriod = "~";
					}else{
						searchDatePeriod = startPeriod+"~"+endPeriod;
					}
					tabData[0] ="누적,"+searchDatePeriod;
				}
				setTabs(tabData);
			}
			
			function setTabs(tabData){
				var tabsObj = "";
				for(var i=0;i<tabData.length;i++){
					var tabTxt = tabData[i].split(",")[0];
					var tabVal = tabData[i].split(",")[1];
					tabsObj += "<li onclick='javascript:getData(\""+tabVal+"\", this);'>"+tabTxt+"</li>";
				}
				$("#tabWrap").html(tabsObj);
				$("#tabWrap").children("li").first().click();
				
				if(tabData.length>9){
					$(".nav").show();
				}else{
					$(".nav").hide();
				}
			}
			
			function getData(searchDate, trigger){
				var startDate = searchDate.split("~")[0];
				var endDate = searchDate.split("~")[1];
				$("#startDate").val(startDate);
				$("#endDate").val(endDate);
				
				$.ajax({
					type: "POST",
					url: "<c:url value="/logging/getCateData.do" />",
					dataType: "html",
					async: false,
					data: $("#searchFrm").serialize(),
					success: function(data){
						$("#tabWrap").children("li").removeClass("selected");
						$(trigger).addClass("selected");
						
						$("#loggingData").html(data);
					},
					beforeSend: function(){
					},
					error: function(jqXHR, textStatus, errorThrown){
						//alert(jqXHR.responseText); //에러 페이지 내용
						alert("오류가 발생하였습니다.\n관리자에게 문의 바랍니다.");
					},
					complete: function(){
					}
				 });
			}
			
			function chgTabs(type){
				if(type == 0){//왼쪽
					var tabs = $("#tabs > ul > li[class*='hide']");
					var tabLen = tabs.length;
					var endIdx = tabs.length-9>0?tabs.length-9:0;
					for(var i=tabLen;i>=endIdx;i--){
						$(tabs).eq(i).removeClass("hide");
					}
				}else if(type == 1){//오른쪽
					var tabs = $("#tabs > ul > li").not('[class*="hide"]');
					var tabLen = (tabs.length>9?9:0);
					for(var i=0;i<tabLen;i++){
						$(tabs).eq(i).addClass("hide");
					}
				}
			}
		</script>
	</head>
	<body>
		<div class="bodyWrap">
<%@ include file="/WEB-INF/pages/includes/header.jsp" %>
<%@ include file="/WEB-INF/pages/includes/left.jsp" %>
			<div class="contWrap">
				<div class="menuTitle">카테고리 통계</div>
				<div class="searchWrap">
					<form id="searchFrm" name="searchFrm">
						<input type="hidden" name="maxnum" value="${maxnum}" />
						<input type="hidden" name="page" value="${page}" />
						<ul  class="lineBlock">
							<li>
								<font>조회단위</font>
								<label>
									<input type="radio" name="searchType" class="searchType" value="" onclick="javascript:$('.dateType').removeAttr('disabled');" <c:if test="${empty param.searchType}"> checked="checked" </c:if>>누적
								</label>
								<label>
									<input type="radio" name="searchType" class="searchType" value="year" onclick="javascript:$('.dateType').removeAttr('disabled');" <c:if test="${param.searchType eq 'year'}"> checked="checked" </c:if>>연도별
								</label>
								<label>
									<input type="radio" name="searchType" class="searchType" value="month" onclick="javascript:$('.dateType').eq(0).attr('disabled','disabled');$('.dateType').eq(1).click();" <c:if test="${param.searchType eq 'month'}"> checked="checked" </c:if>>월별
								</label>
								<label>
									<input type="radio" name="searchType" class="searchType" value="date" onclick="javascript:$('.dateType').eq(0).attr('disabled','disabled');$('.dateType').eq(1).click();" <c:if test="${param.searchType eq 'date'}"> checked="checked" </c:if>>일별
								</label>
							</li>
							<li>
								<font>조회기간</font>
								<label>
									<input type="radio" name="dateType" class="dateType" value="0" onclick="javascript:$('.date').attr('disabled', 'true');" <c:if test="${param.dateType eq 0 || empty param.dateType}"> checked="checked" </c:if>>전체
								</label>
								<label>
									<input type="radio" name="dateType" class="dateType" value="1" onclick="javascript:$('.date').removeAttr('disabled');" <c:if test="${param.dateType eq 1}"> checked="checked" </c:if>>
									<input type="text" class="date" name="startPeriod" readonly="readonly" value="${param.startPeriod}" /> ~ <input type="text" class="date" name="endPeriod" readonly="readonly" value="${param.endPeriod}" />
									<input type="hidden" id="startDate" name="startDate" readonly="readonly" value="${param.startDate}" />
									<input type="hidden" id="endDate" name="endDate" readonly="readonly" value="${param.endDate}" />
								</label>
							</li>
							<li>
								<font>카테고리</font>
								<select name="categoryId">
									<option value="" <c:if test="${empty param.categoryId}"> selected="selected" </c:if> >전체</option>
									<c:forEach items="${categoryList}" var="category">
										<option value="${category.id}" <c:if test="${category.id eq param.categoryId}"> selected="selected" </c:if> >${category.name}</option>
									</c:forEach>
								</select>
							</li>
						</ul>
						<input type="button" class="btn" value="조회" onclick="javascript:goAction();" />
					</form>
				</div>
				<div id="tabs">
					<ul id="tabWrap">
					</ul>
					<span class="nav">
						<span onclick="javascript:chgTabs(0);">&lt;</span> | <span onclick="javascript:chgTabs(1);">&gt;</span>
					</span>
				</div>
				<table name="tab" class="listTbl tbl" border="0">
					<colgroup>
						<col width="70px;" />
						<col width="*" />
						<col width="*" />
						<col width="*" />
						<col width="*" />
						<col width="*" />
						<col width="*" />
						<col width="*" />
						<col width="*" />
					</colgroup>
					<thead>
						<tr>
							<th>No.</th>
							<th>카테고리</th>
							<th>컨텐츠수</th>
							<th>다운로드</th>
							<th>사용횟수</th>
							<th>사용시간</th>
							<th>스크랩 사용횟수</th>
							<th>이메일 사용횟수</th>
							<th>트위터 사용횟수</th>
							<th>페이스북 사용횟수</th>
						</tr>
					</thead>
					<tbody id="loggingData">
						<tr><td colspan="10" style="text-align: center;">데이터가 없습니다.</td></tr>
					</tbody>
				</table>
			</div>
<%@ include file="/WEB-INF/pages/includes/footer.jsp" %>
		</div>
	</body>
</html> 